<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .cont{margin: 0 auto;background:#ccc;position: relative;}
        .box{padding: 6px;float: left;}
        .imgbox{padding: 6px;border: solid 1px black;border-radius: 6px;}
        .imgbox img{width: 200px;}
    </style>
    <script>
        onload = function(){
            new WaterfallFlow();
        }

        class WaterfallFlow{
            constructor(){
                this.cont = document.querySelector(".cont");
                this.box = document.querySelectorAll(".cont .box");
                // 执行补全事件
                this.init();
                // 执行第一行
                this.firstLine();
                // 执行其他行
                this.otherLine();
            }
            init(){
                // 能放下的最大的行数=向下取整(浏览器的宽度/每个照片的宽)
                this.maxNum = parseInt(document.documentElement.clientWidth / this.box[0].offsetWidth);
                // 容器的宽=最大的行数*每一行的宽度  便于css中的居中
                this.cont.style.width = this.maxNum * this.box[0].offsetWidth + "px";
            }
            firstLine(){
                // 第一行
                // 准备一个数组
                this.heightArr = [];
                // 遍历第一行，将每个图片对应的高度放进数组
                for(let i=0;i<this.maxNum;i++){
                    this.heightArr.push(this.box[i].offsetHeight);
                }
            }
            otherLine(){
                // 其他行
                for(let i=this.maxNum;i<this.box.length;i++){
                    // 从第二行开始，每个图片都需要用定位，来确定具体的位置
                    this.box[i].style.position = "absolute";
                    // console.log(Math.min(...this.heightArr));
                    // console.log(Math.min.apply(null, this.heightArr));
                    // console.log(this.heightArr.slice(0).sort(function(a,b){
                    //     return a-b;
                    // })[0])
                    // 展开装有上一行高度的数组，并取最小值
                    const min = Math.min(...this.heightArr);
                    // 根据最小的值，通过indexof来找它的索引
                    const minIndex = this.heightArr.indexOf(min);
                    // 距上的距离=上一行最小高度的值
                    this.box[i].style.top = min + "px";
                    // 距左的距离=上一行最小高度的值的索引*某个图片的宽
                    this.box[i].style.left = minIndex * this.box[0].offsetWidth + "px";
                    // 【瀑布流的核心】
                    // 最小高+放置在最小高的下面的元素的高度，重新设置给最小高
                    // 交给循环，每一次都在找最小高
                    this.heightArr[minIndex] += this.box[i].offsetHeight;
                }
            }
        }

    </script>
</head>
<body>
    <div class="cont">
        <div class="box">
            <div class="imgbox">
                <img src="./imgs/13.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./imgs/m2.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./imgs/1.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./imgs/4.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./imgs/12.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./imgs/3.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./imgs/2.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./imgs/5.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./imgs/6.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./imgs/7.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./imgs/8.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./imgs/13.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./imgs/9.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./imgs/10.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./imgs/l2.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./imgs/11.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./imgs/m2.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./imgs/1.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./imgs/4.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./imgs/3.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./imgs/2.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./imgs/5.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./imgs/13.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./imgs/6.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./imgs/11.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./imgs/7.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./imgs/8.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./imgs/9.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./imgs/10.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./imgs/l2.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./imgs/m2.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./imgs/1.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./imgs/4.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./imgs/11.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./imgs/3.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./imgs/2.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./imgs/5.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./imgs/6.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./imgs/7.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./imgs/8.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./imgs/12.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./imgs/14.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./imgs/9.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./imgs/10.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./imgs/12.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./imgs/l2.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./imgs/m2.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./imgs/14.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./imgs/1.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./imgs/4.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./imgs/3.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./imgs/12.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./imgs/2.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./imgs/5.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./imgs/6.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./imgs/7.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./imgs/8.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./imgs/9.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./imgs/10.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./imgs/l2.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./imgs/11.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./imgs/12.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./imgs/10.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./imgs/2.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./imgs/5.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./imgs/6.jpg" alt="">
            </div>
        </div>

    </div>
</body>
</html>